<template>
	<view class="header-nav-box">
		<!--  -->
		<view class="header-nav" :style="{backgroundColor:navbarBoxBg }">
			
			<!-- 状态栏高度占位 -->
			<view class="nav-bar-placeholder" :style="{height: statusBarHeight}"></view>
			
			<!-- 内容 -->
			<view class="nav-content" :style="{height: navigationBarHeight,paddingTop:statusBarHeight+'px'}">
			
				<!-- 类型不为space时 -->
				<block v-if="navbarType != 'space'">
					
					<!-- 返回菜单 -->
					<view class="icon-back" v-if="showBack" @click="onClickLeft">
						<!-- <text class="iconfont icon-navigate-left" :style="{color:newTitleColor,fontSize:'48rpx'}"></text> -->
						<u-icon name="arrow-left" top="1" size="20" bold :color="newTitleColor"></u-icon>
					</view>
					
					<!-- 搜索框 -->
					<view class="content-search" v-if="navbarType === 'search'">
						<view class="search-input" :style="{backgroundColor: searchBg}">
							<text class="iconfont icon-Search" :style="{color:newTitleColor,fontSize:'38rpx'}"></text>
							<view class="search-input-placeholder">{{ placeholder }}</view>
						</view>
					</view>
					
					<!-- 文字标题 -->
					<view class="header-title" v-if="navbarType === 'title'">
						<text class="title" :style="{color: newTitleColor}">{{ navbarTitle }}</text>
					</view>
					
					<view class="icon-right" v-if="showRight" @click="onClickRight">
						<text class="iconfont" :class="rightClass" :style="{color:newTitleColor,fontSize:'48rpx'}"></text>
					</view>
					
					<!-- 自定义 -->
					<slot v-if="navbarType === 'slot'"></slot>
					
				</block>
			
			</view>
			
		</view>
		<!-- navbar高度占位 -->
		<block v-if="isHeight">
			<view class="navbar-height-block" :style="{paddingTop: navHeight}"></view>
		</block>
	</view>
</template>

<script>
	/**
	 * 自定义navbar组件
	 * @property {String}      navbarType         navbar类型     space -空头部导航 search -搜索框 title - 文字标题 slot -自定义菜单
	 * @property {String}      navbarTitle        navbar文字标题
	 * @property {String}      navbarTitleColor   navbar文字标题颜色
	 * @property {Boolean}     showBack           navbar back按钮显示控制
	 * @property {Boolean}     showRight          navbar 右边按钮显示控制
	 * @property {String}      navbarBg           navbar背景颜色(类型不为space时默认: #FFFFFF)
	 * @property {Boolean}     isHeight           navbar是否高度占位
	 * @property {String}      searchBg           navbar搜素框背景颜色
	 * @property {String}      placeholder        搜索框placeholder文字 
	 * @property {String}      defaultBackUrl     没有history时回退普通页面
	 * @property {String}      backTabbarUrl      没有history时回退tabber页面(默认: /pages/index/index)
	 * */
	export default {
		name:"header-nav",
		props: {
			navbarType: {
				type: String,
				default: 'title'
			},
			navbarTitle: {
				type: String,
				default: ''
			},
			navbarTitleColor: {
				type: String,
				default: '#323233'
			},
			navbarBg: {
				type: String,
				default: '#FFFFFF'
			},
			isHeight: {
				type: Boolean,
				default: true
			},
			searchBg: {
				type: String,
				default: '#F7F8FA'
			},
			placeholder: {
				type: String
			},
			showBack: {
				type: Boolean,
				default: false
			},
			showRight: {
				type: Boolean,
				default: false
			},
			rightClass:{
				type:String,
				default:''
			},
			defaultBackUrl: {
			  type: String,
			  default: ''
			},
			backTabbarUrl: {
			  type: String,
			  default: '/pages/index/index'
			},
		},
		data() {
			return {
				headerOpacity: 0,
				titleType: 'default',
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 0, // 头部导航栏高度
				navHeight: 0, // 总高度
				windowHeight: 0, // 可使用窗口高度
			};
		},
		computed: {
			// 计算navbar是否有背景颜色
			navbarBoxBg: function() {
				if(this.navbarType === 'space') {
					return 'transparent'
				} else if(this.navbarBg === 'transparent') {
					let navbarBg = `rgba(255, 255, 255, ${this.headerOpacity})`
					return navbarBg
				} else {
					return this.navbarBg
				}
			},
			// 计算navbar标题文字颜色
			newTitleColor: function() {
				if(this.navbarType === 'title' && this.navbarBg === 'transparent' && this.navbarTitleColor === '#FFFFFF') {
					if(this.headerOpacity == 0) {
						return this.navbarTitleColor
					} else {
						return `rgba(50, 50, 51, ${this.headerOpacity})`
					}
				} else {
					return this.navbarTitleColor
				}
			}
		},
		created() {
			this.statusBarHeight = this.$db.get('menuInfo').statusBarHeight
			this.navigationBarHeight = this.$db.get('menuInfo').contentTop
			this.windowHeight = this.$db.get('menuInfo').windowHeight
			this.navHeight = this.$db.get('menuInfo').contentTop
		},
		mounted() {
			uni.$on('pageTop', data => {
				this.headerOpacity = (data / (this.navHeight * 2)).toFixed(1)
			})
		},
		methods: {
			// 点击回退
			onClickLeft () {
				if(this.showBack){
					if(getCurrentPages().length > 1){
						uni.navigateBack({
							delta: 1
						});
					} else {
						// #ifndef H5
						if(this.defaultBackUrl){
							uni.redirectTo({
								url:this.defaultBackUrl
							})
						}else{
							if(this.backTabbarUrl){
								uni.reLaunch({
									url: this.backTabbarUrl
								});
							}
							
						}
						// #endif
					}
					
				} else {
					this.$emit('click-left')
				}
			},
			onClickRight(){
				this.$emit('click-right')
			}
		}
	}
</script>

<style lang="scss" scoped>
.header-nav-box {
	.header-nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2000;
		.nav-content {
			padding: 0 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.content-search {
				margin-left: 22rpx;
				.search-input {
					padding: 0 32rpx;
					box-sizing: border-box;
					width: 436rpx;
					height: 72rpx;
					border-radius: 38rpx;
					display: flex;
					align-items: center;
					&-placeholder {
						line-height: 72rpx;
						margin-left: 24rpx;
						font-size: 28rpx;
						color: #646566;
					}
				}
			}
			.header-title {
				flex: 1;
				text-align: center;
				.title {
					width: 300rpx;
					display: inline-block;
					transform: translateX(-20rpx);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			
			.header-share{
				flex: 1;
				text-align: center;
				display: flex;
				align-items: center;
				.title {
					width: 300rpx;
					display: inline-block;
					transform: translateX(-20rpx);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
</style>